<template>
	<!-- 快递查询 -->
	<view class="l_wp">
		<view class="l_title_item">订单号：<text selectable>{{ordersn}}</text><button size="mini"
				@click="copy(ordersn)">复制</button></view>
		<view class="l_title_item">快递单号：<text selectable>{{expresssn}}</text><button size="mini"
				@click="copy(expresssn)">复制</button></view>
		<uni-steps :options="list2" active-color="#007AFF" :active="active" direction="column" />
	</view>
</template>

<script>
	import UniSteps from '@/components/uni-steps.vue';
	export default {
		components: {
			UniSteps
		},
		data() {
			return {
				ordersn: '',
				expresssn: '',

				active: 0,
				list2: []
			}
		},
		onLoad(option) {
			this.ordersn = option.ordersn;
			this.expresssn = option.expresssn;
			this.getlist();
		},
		methods: {
			getlist() {
				uni.showLoading({title:'加载中'});
				this.$axios('express/step', "POST", 'order', {
					expresssn: this.expresssn
				}).then(res => {
					uni.hideLoading();
					if (res.data.code == 200) {
						this.list2 = res.data.data.list.map(v => ({
							title: v.step,
							desc: v.time
						}));
						if (this.list2.length <= 0) {
							this.list2 = [{
								title: '未揽收',
								desc: ''
							}]
						}
					}
				})
			},
			copy(v) {
				// #ifdef H5
				this.copyToClip(v);
				// #endif
				// #ifndef H5
				uni.setClipboardData({
					data: v
				});
				// #endif
			},
			copyToClip(content) {
				var aux = document.createElement("input");
				aux.setAttribute('readonly', 'readonly')
				aux.setAttribute("value", content);
				document.body.appendChild(aux);
				aux.select();
				aux.setSelectionRange(0, content.length);
				var message = document.execCommand("copy");
				if (message) {
					this.$api.msg('复制成功')
				} else {
					this.$api.msg('复制失败');
				}
				document.body.removeChild(aux);
			}
		}
	}
</script>

<style lang="scss">
	.l_wp {
		padding: 20upx 20upx 130upx;
	}

	.l_title_item {
		padding-bottom: 15upx;
		display: flex;
		align-items: center;
	}

	.l_title_item button {
		margin: 0 20upx;
	}
</style>
